<template>
  <div class="rankingBoxContainer">
    <img
      :src="officialListDetailItem.coverImgUrl || cover"
      alt=""
      @click="
        officialListDetailItem.id
          ? handleTopClick(officialListDetailItem.id)
          : ''
      "
    />
    <div class="sing">
      <div
        class="one"
        v-for="(item, index) in (officialListDetailItem.topSongs &&
          (openType
            ? officialListDetailItem.topSongs
            : officialListDetailItem.topSongs.slice(0, 10))) ||
        officialListDetailItem.tracks?.slice(0, 5) ||
        officialListDetailItem.songs?.slice(0, 10)"
        :key="index"
        :style="{
          backgroundColor: index % 2 === 0 ? '#f9f9f9' : '#fff',
          borderTopRightRadius: index === 0 ? '15px' : '0',
          borderTopLeftRadius: index === 0 ? '15px' : '0',
          borderBottomLeftRadius: index === 4 ? '15px' : '0',
          borderBottomRightRadius: index === 4 ? '15px' : '0'
        }"
        @dblclick="handleSongClick(officialListDetailItem.id || item.id, index)"
      >
        <div class="left">
          <span class="index">{{ index + 1 }}</span>
          <span class="name">{{ item.name }}</span>
        </div>
        <span class="singer">{{ item.ar[0].name }}</span>
      </div>
      <div
        class="more"
        @click="handleMoreClick(officialListDetailItem)"
        v-if="!openType"
      >
        查看全部→
      </div>
      <div class="more" @click="handleMoreClick()" v-else>收起↑</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  props: {
    officialListDetailItem: {
      typeof: Array,
      default() {
        return []
      }
    },
    // 传过来的封面
    cover: {
      type: String,
      default() {
        return ''
      }
    },
    // 传过来的listId
    listId: {
      type: String,
      default() {
        return ''
      }
    },
    openType: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleTopClick(id) {
      // console.log(id)
      this.$router.push({ path: '/index/musicDateil', query: { id } })
      // console.log('排行榜')
    },
    handleSongClick(id, index) {
      let listId = this.listId
      this.$emit('getSongIdAndIndex', { id, index, listId })
      // console.log(id, index)
    },
    handleClick() {
      this.$emit('clickMore')
    },
    // 查看更多
    handleMoreClick(item) {
      // console.log(this.officialListDetailItem.songs[0].id)
      const id = this.listId // 点专辑的id
      this.$emit('handleMoreClick', id, item?.id)
    }
  },
  created() {
    // console.log(this.officialListDetailItem.isOpen)
  }
}
</script>
<style lang="scss" scoped>
.rankingBoxContainer {
  display: flex;
  margin: 20px 0 40px 0;
  width: 100%;
  img {
    width: 200px;
    height: 200px;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.5s;
    transform-style: preserve-3d;
    perspective: 800px;
    &:hover {
      transform: rotateY(25deg);
      box-shadow: -6px 4px 8px rgba(0, 0, 0, 0.3);
    }
  }
  .sing {
    width: 100%;
    margin-left: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .one {
      display: flex;
      width: 95%;
      justify-content: space-between;
      padding: 5px 0;
      cursor: pointer;
      transition: all 0.3s;
      &:hover {
        background-color: #f4f4f4 !important;
        transform: translateX(5px);
        box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3);
      }
      .left {
        font-size: 16px;
        .index {
          margin-right: 15px;
          color: #999;
          margin-left: 10px;
        }
        .name {
          color: #1f1f1f;
        }
      }
      .singer {
        color: #999;
        margin-right: 10px;
      }
    }
    .more {
      color: #999;
      cursor: pointer;
      transition: all 0.5s;
      max-width: 90px;
      &:hover {
        color: #ec4141;
        transform: translateX(5px);
      }
    }
  }
}
.sing {
  .one {
    margin: 3px 0;
  }
}
</style>
